<template>
  <view class="modal" :class="{show: show}">
    <view class="content">
      <view class="title">{{type}}账单</view>
      <view class="form">
        <view class="form-item">
          <view class="label">金额：</view>
          <input type="number" v-model="amount" placeholder="请输入金额" />
        </view>
        <view class="form-item">
          <view class="label">日期：</view>
          <input type="date" v-model="date" />
        </view>
		<view class="form-item">
		  <view class="label">说明：</view>
		  <input type="text" v-model="description" placeholder="请输入说明" />
		</view>
      </view>
      <view class="btn-group">
        <button class="btn" @click="add">确定</button>
        <button class="btn" @click="close">取消</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    show: Boolean,
    type: String
  },
  data() {
    return {
      amount: '',
      date: '',
	  description: '',
    }
  },
  methods: {
    add() {
      if (!this.amount || !this.date || !this.description) {
        uni.showToast({
          title: '请输入金额和日期',
          icon: 'none'
        })
        return
      }
      this.$emit('add', Number(this.amount), this.date,this.description)
      this.close()
    },
    close() {
      this.$emit('close')
      this.amount = ''
      this.date = ''
	  this.description = ''
    }
  }
}
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.show {
  opacity: 1;
  visibility: visible;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20rpx;
}

.form {
  display: flex;
  flex-direction: column;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.label {
  font-size: 28rpx;
  margin-right: 20rpx;
}

input {
  flex: 1;
  height: 60rpx;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.btn-group {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

.btn {
  margin-left: 20rpx;
  padding: 10rpx 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  font-size: 28rpx;
}
</style>